<template>
    <div>
        <h2 class="header_title">组织预览</h2>
        <div class="_main">
            <organization-chart :datasource="ds"></organization-chart>
        </div>
    </div>
</template>

<script>

import OrganizationChart from 'vue-organization-chart'
import 'vue-organization-chart/dist/orgchart.css'

export default {
    name: 'preview',
    components: {
      OrganizationChart
    },
    data () {
      return {
        ds: {}
      }
    },
    mounted() {
      this.query()
    },
    methods: {
      query() {
        this.$http('user/ganizeplan', {}).then(({ data }) => {
          this.ds = data
        })
      }
    }
}
</script>

<style lang="less">
    .orgchart-container {
        border: none;
        height: auto;
    }
    .orgchart {
        padding: 0;
        background-image: none;
    }
    .orgchart .node .content {
        display: none;
    }
    .orgchart .node .title {
        border-radius: 2px;
        background-color: #090f42;
        border: 1px solid #1a2497;
        padding: 6px 14px;;
    }
    .orgchart .lines .downLine {
        background-color: #1f29ad;
    }
    .orgchart .lines .rightLine {
        border-right: 1px solid #1f29ad;
    }
    .orgchart .lines .leftLine {
        border-left: 1px solid #1f29ad;
    }
    .orgchart .lines .topLine {
        border-top: 2px solid #1f29ad;
    }
    .orgchart .node {
        width: auto;
        min-width: 130px !important;
    }
    .orgchart td .node:hover {
        background-color: transparent;
    }
</style>